<template>
  <div class="market">
    <el-scrollbar height="calc(100vh - 60px)">
      <el-row class="search">
        <el-col :span="10" :offset="6" :xs="{span: 14, offset: 3}">
          <el-input size="large" class="search-input" v-model="searchInput"/>
        </el-col>
        <el-col :span="2">
          <el-button size="large" plain class="search-btn" @click="searchGoods()">搜索</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col v-for="item in goods" :key="item" :xl="3" :lg="4" :md="6" :sm="8" :xs="12" style="margin-top:10px">
          <el-card shadow="hover" :body-style="{ padding: '0px' }" class="good-card">
            <img
              :src='baseUrl + "/goodcenter/nil/image/"+item._source.picture'
              class="good-image"
            />
            <div class="good-des">
              <div>{{item._source.name}}</div>
              <!-- <time class="des">{{ sToT(item._source.created) }}</time> -->
              <div class="des">{{ item._source.des }}</div>
              <el-button text class="button" @click="detail(item._source.good_id)">详情</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-scrollbar>
  </div>
</template>

<script>
import router from '@/router'
import { serverConfig } from '../http/config/index'
import { goodsSearch } from '../http/api/es'
// TODO 详细列表与缩略

export default {
  data() {
    return {
      goods: null,
      searchInput: '',

      baseUrl: serverConfig.baseURL
    }
  },
  created: function() {
    let that = this
    goodsSearch(null)
    .then((res) => {
      that.goods = res.hits.hits
    })
  },
  methods: {
    searchGoods: function() {
      let that = this
      goodsSearch(this.searchInput)
      .then((res) => {
        that.goods = res.hits.hits
      })
    },
    detail: function(goodId) {
      router.push({name: "GoodDetail", params: {goodId}})
    }
  }
}
</script>

<style lang="less" scoped>
  .market {
    .search {
      margin: 20px;
      .search-input {
        
      }
      .search-btn {

      }
    }

    .good-card {
      height: 200px;
      width: 180px;
      margin: auto;
      .good-image {
        display: block;
        height: 100px;
        width: 100px;
        margin: 10px auto;
        object-fit: contain;
      }
      .good-des {
        text-align: center;
        .des {
          height: 20px;
          width: 160px;
          margin: auto;
          font-size: 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
</style>